<template>
    <div class="mainView">
        <!-- 头部 -->
        <header class="headerMain">
            <span>我的</span>
            <div class="headerUserInfoControl">
                <van-popup
                    v-model="show"
                    position="right"
                    :style="{
                        height: '100%',
                        width: '100%',
                        background: '#f5f5f5',
                    }"
                >
                    <div class="userInfoHeader">
                        <van-icon
                            @click="closeUserContent"
                            class="backBtn"
                            name="arrow-left"
                        />
                        <span>个人资料</span>
                    </div>
                    <div class="userInfoControlView">
                        <van-cell title="昵称" is-link value="用户名" />
                        <van-cell title="性别" is-link value="未填写" />
                        <van-cell title="生日" is-link value="未填写" />
                        <van-cell
                            title="手机号"
                            v-if="getStorage()"
                            :value="JSON.parse(getStorage()).tel"
                        />
                    </div>
                    <div class="loginout" @click="dialogConfirm">退出登录</div>
                </van-popup>
                <div class="userTrue" @click="toUserContent">
                    <img
                        :src="
                            getStorage()
                                ? require('@/assets/img/mine/defaultImg.jpeg')
                                : require('@/assets/img/mine/userFalse.jpg')
                        "
                        alt=""
                    />
                    <div>
                        <template v-if="getStorage()">
                            <p class="name">莱斯购用户（张三）</p>
                            <p class="phone">
                                手机号:{{ JSON.parse(getStorage())["tel"] }}
                            </p>
                        </template>
                        <template v-else>
                            <p class="loginBtn">立即登录</p>
                        </template>
                    </div>
                    <van-icon class="rightIcon" name="arrow" />
                </div>
            </div>
        </header>
        <!-- 我的订单 -->
        <section class="myOrder">
            <van-cell
                title="我的订单"
                icon="shop-o"
                value="查看全部订单"
                is-link
            />

            <van-grid :border="false">
                <van-grid-item icon="photo-o" text="待支付" />
                <van-grid-item icon="photo-o" text="待收货" />
                <van-grid-item icon="photo-o" text="待评价" />
                <van-grid-item icon="photo-o" text="售后/退款" />
            </van-grid>
        </section>
        <section class="clientInformation">
            <van-cell title="我的优惠券" icon="shop-o" value="2" is-link />
            <van-cell title="我的收货地址" icon="shop-o" is-link />
        </section>
        <div class="greenCard">
            <van-cell title="我的绿卡" icon="shop-o" is-link>
                <template #title>
                    <span class="custom-title" style="margin-right: 0.2rem"
                        >单元格</span
                    >
                    <van-tag type="danger">NEW</van-tag>
                </template>
            </van-cell>
        </div>
        <footer>
            <van-cell
                title="联系客服"
                icon="shop-o"
                value="客服时间 07:00-22:00"
                is-link
            />
            <van-cell title="意见反馈" icon="shop-o" is-link />
            <van-cell title="语言" icon="shop-o" is-link />
            <div class="version">当前版本1.4.3</div>
        </footer>
    </div>
</template>

<script>
export default {
    name:"MineTop",
    data() {
        return {
            show: false,
        };
    },
    methods: {
        getStorage() {
            return window.localStorage.getItem("lsgUserInfo");
        },
        toUserContent() {
            if (this.getStorage()) {
                this.show = true;
            } else {
                this.$router.push("/login");
            }
        },
        closeUserContent() {
            this.show = false;
        },

        dialogConfirm() {
            function beforeClose(action, done) {
                if (action === "confirm") {
                    setTimeout(done, 1000);
                } else {
                    done();
                }
            }
            this.$dialog
                .confirm({
                    message: "确定退出登录吗",
                    beforeClose,
                })
                .then(res => {
                    window.localStorage.removeItem("lsgUserInfo");
                    this.show = false;
                })
                .catch(err => {});
        },
    },
}
</script>

<style lang="scss" scoped>
.mainView {
    background: rgb(245, 245, 245);
    height: 100vh;
}
.headerMain {
    background: rgb(59, 186, 99);
    color: #fff;
    & > span {
        font-size: 0.8rem;
        display: block;
        text-align: center;
        padding: 0.8rem 0;
    }
    .headerUserInfoControl {
        .userTrue {
            display: flex;
            box-sizing: border-box;
            width: 100%;
            padding: 10px 16px;
            font-size: 0.76rem;
            align-items: center;
            position: relative;
            img {
                width: 4rem;
                height: 4rem;
                border-radius: 50%;
            }
            div {
                display: flex;
                flex-direction: column;

                margin-left: 0.5rem;
                p {
                    margin: 0.2rem 0;
                }
            }
        }
    }
}
.rightIcon {
    position: absolute !important;
    right: 1rem;
    top: 50%;
    transform: translate(0, -50%);
    color: #969799;
    z-index: 1;
}
.backBtn {
    color: #1989fa;
    font-size: 16px;
    margin-left: 0.3rem;
}
.userInfoHeader {
    height: 2.5rem;
    line-height: 2.5rem;
    background: #fff;
    position: relative;
    span {
        position: absolute;
        left: 50%;
        top: 0;
        color: #333;
        font-size: 16px;
        transform: translate(-50%);
    }
}
.userInfoControlView {
    margin: 0.2rem 0 0.4rem 0;
}
.loginout {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 0.7rem;
}
section,
.greenCard {
    background: #fff;
    margin-bottom: 0.4rem;
}
.version {
    margin: 0 auto;
    text-align: center;
    font-size: 0.6rem;
    background-color: #ffffff;
    height: 2rem;
    color: grey;
    line-height: 2rem;
    padding-bottom: 4rem;
}

</style>